<template>
    <div>
        <el-form :inline="true" class="demo-form-inline" :model="categoryForm">
            <el-form-item label="一级分类">
                <el-select :disabled="show" placeholder="请选择" v-model="categoryForm.category1Id" @change="getCategory2List">
                    <el-option :label="c1.name" :value="c1.id" v-for="(c1, index) in List1" :key="c1.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="二级分类">
                <el-select :disabled="show" placeholder="请选择" v-model="categoryForm.category2Id" @change="getCategory3List">
                    <el-option :label="c2.name" :value="c2.id" v-for="(c2, index) in List2" :key="c2.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="三级分类">
                <el-select :disabled="show" placeholder="请选择" v-model="categoryForm.category3Id" @change="handler3">
                    <el-option :label="c3.name" :value="c3.id" v-for="(c3, index) in List3" :key="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "CategorySelect",
    props:['show'],
    data() {
        return {
            //一级分类数据
            List1: [],
            //二级分类数据
            List2: [],
            //三级分类数据
            List3: [],
            //三级联动表单数据
            categoryForm: {
                category1Id: '',
                category2Id: '',
                category3Id: ''
            }
        }

    },
    mounted() {
        this.getCategory1List()

    },
    methods: {
        //获取一级分类数据   
        async getCategory1List() {
            let result = await this.$API.attr.reqCategory1List()
            if (result.code === 200) {
                this.List1 = result.data;
            } else {
                this.$message.error(result.message);
            }
        },
        //当一级分类发生变化时，获取二级分类数据
        async getCategory2List() {
            //当一级分类发生变化时，清空二三级分类的数据
            this.List2 = []
            this.List3 = []
            this.categoryForm.category2Id = ''
            this.categoryForm.category3Id = ''
            const { category1Id } = this.categoryForm
            this.$emit('getCategoryId',{id:category1Id,level:1})
            let result = await this.$API.attr.reqCategory2List(category1Id)
            if (result.code === 200) {
                this.List2 = result.data;
            } else {
                this.$message.error(result.message);
            }
        },
        //二级分类发生变化时，获取三级分类数据
        async getCategory3List() {
            //当二级分类发生变化时，清空三级分类的数据
            this.List3 = []
            this.categoryForm.category3Id = ''
            const { category2Id } = this.categoryForm
            this.$emit('getCategoryId',{id:category2Id,level:2})
            let result = await this.$API.attr.reqCategory3List(category2Id)
            if (result.code === 200) {
                this.List3 = result.data;
            } else {
                this.$message.error(result.message);
            }
        },
        //当一二三级分类全部选中时，发送数据
        handler3(){
            const {category3Id}=this.categoryForm
            this.$emit('getCategoryId',{id:category3Id,level:3})
        }

    }
}
</script>